<template>
  <div>
    <el-container>
      <!--    侧边栏  -->
      <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529">
        <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center">
          <span class="logo-title" v-show="!isCollapse">GPT-Mind</span>
        </div>

        <el-menu :default-openeds="['info']" :collapse="isCollapse" :collapse-transition="false" router
          background-color="#001529" text-color="rgba(255, 255, 255, 0.65)" active-text-color="#fff" style="border: none"
          :default-active="$route.path">
          <el-menu-item index="/home">
            <i class="el-icon-s-home"></i>
            <span slot="title">系统首页</span>
          </el-menu-item>
          <el-menu-item index="/about">
            <i class="el-icon-s-home"></i>
            <span slot="title">关于</span>
          </el-menu-item>
        </el-menu>

      </el-aside>

      <el-container>
        <!--        头部区域-->
        <el-header>

          <i :class="collapseIcon" style="font-size: 26px" @click="handleCollapse"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
            <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: $route.path }">{{ $route.meta.name }}</el-breadcrumb-item>
          </el-breadcrumb>

          <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end">
            <i class="el-icon-quanping" style="font-size: 26px" @click="handleFull"></i>

            <el-dropdown placement="bottom">
              <div style="display: flex; align-items: center; cursor: default">
                <img
                  :src="user.avatar || 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80'"
                  alt="" style="width: 40px; height: 40px; border-radius: 50%; margin: 0 5px">
                <span>{{ user }}</span>
              </div>
              <template #dropdown>
                <el-menu>
                  <el-menu-item @click.native="$router.push('/person')">个人信息</el-menu-item>
                  <el-menu-item @click.native="$router.push('/password')">修改密码</el-menu-item>
                  <el-menu-item @click.native="logout">退出登录</el-menu-item>
                </el-menu>
              </template>
            </el-dropdown>
          </div>

        </el-header>

        <!--        主体区域-->
        <el-main>
          <router-view @update:user="updateUser" />
        </el-main>

      </el-container>


    </el-container>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import { useRouter } from "vue-router";

export default defineComponent({
  name: 'HomeView',
  setup() {
    const isCollapse = ref(false); // 不收缩
    const asideWidth = ref('200px');
    const collapseIcon = ref('el-icon-s-fold');
    const user = ref(JSON.parse(localStorage.getItem('username') || '{}'));
    const router = useRouter();

    const handleFull = () => {
      document.documentElement.requestFullscreen();
    };

    const logout = () => {
      localStorage.clear();
      router.push('/user');
    };

    const handleCollapse = () => {
      isCollapse.value = !isCollapse.value;
      asideWidth.value = isCollapse.value ? '64px' : '200px';
      collapseIcon.value = isCollapse.value ? 'el-icon-s-unfold' : 'el-icon-s-fold';
    };

    const updateUser = (newUser: object) => {
      user.value = newUser;
    };

    onMounted(() => {
      // 页面加载完成之后触发的逻辑
    });

    return {
      isCollapse,
      asideWidth,
      collapseIcon,
      user,
      handleFull,
      handleCollapse,
      updateUser,
      logout
    };
  },
});
</script>

<!-- <script>
export default {
  name: 'HomeView',
  data() {
    return {
      isCollapse: false,  // 不收缩
      asideWidth: '200px',
      collapseIcon: 'el-icon-s-fold',
      user: JSON.parse(localStorage.getItem('honey-user') || '{}'),
    }
  },
  mounted() {   // 页面加载完成之后触发

  },
  methods: {
    handleFull() {
      document.documentElement.requestFullscreen()
    },
    handleCollapse() {
      this.isCollapse = !this.isCollapse
      this.asideWidth = this.isCollapse ? '64px' : '200px'
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
    },
    updateUser(newUser) {
      this.user = newUser;
    }
  }
}
</script> -->

<style>
.el-menu--inline {
  background-color: #000c17 !important;
}

.el-menu--inline .el-menu-item {
  background-color: #000c17 !important;
  padding-left: 49px !important;
}

.el-menu-item:hover,
.el-submenu__title:hover {
  color: #fff !important;
}

.el-submenu__title:hover i {
  color: #fff !important;
}

.el-menu-item:hover i {
  color: #fff !important;
}

.el-menu-item.is-active {
  background-color: #1890ff !important;
  border-radius: 5px !important;
  width: calc(100% - 8px);
  margin-left: 4px;
}

.el-menu-item.is-active i,
.el-menu-item.is-active .el-tooltip {
  margin-left: -4px;
}

.el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
}

.el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
}

.el-submenu .el-menu-item {
  min-width: 0 !important;
}

.el-menu--inline .el-menu-item.is-active {
  padding-left: 45px !important;
}

/*.el-submenu__icon-arrow {*/
/*  margin-top: -5px;*/
/*}*/

.el-aside {
  transition: width .3s;
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
}

.logo-title {
  margin-left: 5px;
  font-size: 20px;
  transition: all .3s;
  /* 0.3s */
}

.el-header {
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
  display: flex;
  align-items: center;
}
</style>
